<template>
  <div class="home-page">
    <!-- 查询区域：输入姓名/身份证号进行模糊查询 -->
    <SelectGroup :all-patients="allPatients" @query="handleQueryResult" />

    <!-- 现场挂号卡片区域：展示查询结果，支持新增挂号和用户详情 -->
    <el-card class="mt-6 main-card">
      <template #header>
        <div class="clearfix">
          <span class="main-title">现场挂号</span>
          <el-button 
            class="main-btn"
            style="float: right; padding: 3px 0" 
            type="primary"
            @click="showRegisterForm = true"
          >
            <i class="el-icon-plus"></i> 新增挂号
          </el-button>
        </div>
      </template>
      <!-- 患者表格组件，数据通过 props 传递 -->
      <PatientTable :table-data="filteredPatients" @select="handlePatientSelect" />
    </el-card>

    <!-- 新增挂号弹窗，visible受控 -->
    <RegisterForm :visible="showRegisterForm" @close="showRegisterForm = false" @register="handleRegister" />

    <!-- 用户详情弹窗 -->
    <UserDetailDialog v-if="showUserDetail" :user="selectedUser" @close="showUserDetail = false" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SelectGroup from '../components/SelectGroup.vue'
import PatientTable from '../components/PatientTable.vue'
import RegisterForm from '../components/RegisterForm.vue'
import UserDetailDialog from '../components/UserDetailDialog.vue'

// 所有现场挂号用户数据（模拟）
const allPatients = ref([
  { id: 1, name: '张三', gender: '男', idCard: '110101199001011234', birthDate: '1990-01-01', phone: '13800138000', address: '北京市朝阳区' },
  { id: 2, name: '李四', gender: '女', idCard: '120101199202025678', birthDate: '1992-02-02', phone: '13900139000', address: '天津市和平区' },
  { id: 3, name: '王五', gender: '男', idCard: '130101198503034321', birthDate: '1985-03-03', phone: '13700137000', address: '河北省石家庄市' },
  { id: 4, name: '赵六', gender: '女', idCard: '310101199504047890', birthDate: '1995-04-04', phone: '13600136000', address: '上海市浦东新区' },
  { id: 5, name: '钱七', gender: '男', idCard: '440101198805051234', birthDate: '1988-05-05', phone: '13500135000', address: '广州市天河区' },
  { id: 6, name: '孙八', gender: '女', idCard: '510101199306067890', birthDate: '1993-06-06', phone: '13400134000', address: '成都市武侯区' },
])

// 查询结果数据
const filteredPatients = ref([...allPatients.value])

// 新增挂号弹窗显示状态
const showRegisterForm = ref(false)
// 用户详情弹窗显示状态
const showUserDetail = ref(false)
// 当前选中的用户
const selectedUser = ref(null)

// 处理 SelectGroup 查询结果
const handleQueryResult = (result) => {
  filteredPatients.value = result
}

// 处理患者选择，弹出详情弹窗
const handlePatientSelect = (patient) => {
  selectedUser.value = patient
  showUserDetail.value = true
}

// 处理新增挂号，数据添加到allPatients和filteredPatients
const handleRegister = (newUser) => {
  const user = { ...newUser, id: Date.now() }
  allPatients.value.push(user)
  filteredPatients.value = [...allPatients.value]
  showRegisterForm.value = false
}
</script>

<style scoped>
.home-page {
  padding: 24px;
  background: linear-gradient(135deg, #e3f0ff 0%, #f5f7fa 100%);
  min-height: 100vh;
}
.mt-6 {
  margin-top: 1.5rem;
}
.main-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(80,120,200,0.10), 0 1.5px 8px 0 rgba(80,120,200,0.08);
  transition: box-shadow 0.3s;
}
.main-card:hover {
  box-shadow: 0 12px 40px 0 rgba(80,120,200,0.16), 0 2px 12px 0 rgba(80,120,200,0.10);
}
.main-title {
  font-size: 22px;
  font-weight: 600;
  color: #1976d2;
  letter-spacing: 1px;
}
.main-btn {
  border-radius: 8px;
  background: linear-gradient(90deg, #42a5f5 0%, #1976d2 100%);
  font-weight: 600;
  letter-spacing: 1px;
  border: none;
  transition: background 0.2s, box-shadow 0.2s;
}
.main-btn:hover {
  background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
  box-shadow: 0 4px 16px 0 rgba(33,150,243,0.12);
}
</style> 